<template>
  <div class="box">
    <h4>
      <a class="el-icon-arrow-left" @click="on"></a>
      <span>评论详情</span>
      <a></a>
    </h4>

    <div class="center">
      <!-- <div class="artpag_list" v-for="(item, index) in data2" :key="index">
        <div class="head">
          <p><img :src="url + item.u_headers" /></p>
        </div>
        <div class="comment">
          <p class="nick">{{ item.u_nick }}</p>
          <p class="text">{{ item.content_text }}</p>
          <p class="url">
            <img :src="url + item.puc_url" alt="" />
          </p>
          <p class="time">
            <a class="a1">{{ item.release_time }}</a>
            <a></a>
          </p>
        </div>
      </div> -->
      <div v-for="(item, index) in data" :key="index" class="discuss">
        <p>
          <span><img :src="url + item.u_headers" alt="" /></span>
          <a class="discuss_nick">{{ item.u_nick }}</a>
          <a class="discuss_time">{{ item.com_time }}</a>
        </p>
        <a class="discuss_text">{{ item.com_text }}</a>
      </div>
      <p class="buttom">
        <span></span>
        <input type="text" placeholder="写评论..."   maxlength="20"/>
        <a @click="discuss($event)">评论</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      data: [],
      data2: [],
      url: "http://test.com:3000/image/",
      uid: this.$jwt(localStorage.getItem("User-Token")).uid,
    };
  },
  methods: {
    // 返回社区
    on() {
      this.$router.push({
        path: "/community",
      });
    },
    // 发布评论
    discuss(e) {
      this.$http
        .post("/api/community/comment", {
          text_id: this.$route.query.tid,
          uid: this.uid,
          com_text: e.target.previousElementSibling.value,
          com_time: this.$time(Date.now()),
        })
        .then((res) => {
          if (res.code == 200) {
            this.reload();
            this.$message({
              message: "评论成功",
              type: "success",
            });
            e.target.previousElementSibling.value = "";
          }
        });
    },
  },
  mounted() {
    // console.log(this.$route.query.tid);
    this.$http
      .get("/api/community/showcomments", {
        tid: this.$route.query.tid,
      })
      .then((res) => {
        // console.log(res);
        // if (res.commentsData.length == "") {
        //   this.$message({
        //     message: "该文章目前还没有被评论",
        //   });
        //   this.$router.push({
        //       path: '/community'
        //   })
        // }
        res.commentsData.forEach((once) => {
          this.data.push(once);
        });
      });
    // 文章详情
    // this.$http.post('/api/community/show', {
    //     tid: this.$route.query.tid
    // }).then(res => {
    //     console.log(res);
    // })
  },
};
</script>

<style lang="less" scoped>
.box {
  h4 {
    display: flex;
    margin: 0;
    height: 2rem;
    color: #fff;
    background-color: #000;
    a {
      flex: 1;
      line-height: 2rem;
    }
    span {
      flex: 10;
      line-height: 2rem;
      text-align: center;
    }
  }
  .center {
    height: 86vh;
    color: #fff;
    overflow: hidden;
    overflow-y: scroll;
    background-color: rgb(53, 52, 52);
    .buttom {
      position: fixed;
      display: flex;
      bottom: 5vh;
      width: 100%;
      height: 2rem;
      background-color: #fff;
      input {
        flex: 3;
        margin: 0.25rem 0;
        height: 1.5rem;
        color: rgb(0, 0, 0);
        border: 1px solid #000;
        border-radius: 0.3rem;
      }
      a {
        flex: 1;
        height: 1.6rem;
        color: #000;
        font-size: 0.8rem;
        text-align: center;
        line-height: 2rem;
      }
      span {
        flex: 1;
      }
    }
    p {
      margin: 0;
    }
    .discuss {
      margin: 1rem auto;
      width: 90%;
      p {
        display: flex;
        height: 2rem;
        color: #ccc;
        border-top: 1px solid #000;
        span {
          flex: 1;
          img {
            height: 2rem;
            border-radius: 1rem;
          }
        }
        a {
          flex: 3;
        }
        .discuss_nick {
          padding: 0 0.5rem;
          font-size: 1rem;
        }
        .discuss_time {
          text-align: right;
          font-size: 0.8rem;
        }
      }
      .discuss_text {
        white-space: normal;
        padding: 0 0 0 2rem;
      }
    }
    .artpag_list {
      display: flex;
      height: auto;
      .head {
        flex: 2;
        p {
          height: 4rem;
          img {
            width: 2.5rem;
            height: 2.5rem;
          }
        }
      }
      .comment {
        flex: 8;
        height: 100%;
        .nick {
          font-size: 1rem;
          color: #5fa3d1;
        }
        .url {
          img {
            width: 80%;
            // height: 12rem;
          }
        }
        .time {
          color: rgb(121, 120, 119);
          .a1 {
            float: left;
          }
          .a2 {
            float: right;
            padding: 0 1rem 0 0;
          }
        }
      }
    }
  }
}
</style>